<template>
<div style="padding: 11px;">
    <el-tabs v-model="activeName">
        <el-tab-pane label="软件点检" name="first">
            <!-- 负责人: 吴天才,马闯洲,李谌.完成时间07-27 -->
            <el-row>
                <el-form :inline="true" :model="queryMain" class="demo-form-inline">
                    <el-form-item label="">
                        <el-date-picker   v-selfdbclick  v-model="queryMainSoft.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="-">
                        <el-date-picker   v-selfdbclick  v-model="queryMainSoft.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="产品名称">
                        <el-select v-model="queryMainSoft.productName">
                            <el-option :value="'全部'" :key="'全部'">全部</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="下次点检时间:">
                        <span>{{nextSpotSoftTime}}</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchSoft">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <!-- <el-button type="primary" @click="saveSoft">保存</el-button> -->
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <div style="border: 0.5px solid #DCDFE6">

                    <el-table :data="softData1" style="width: 100%" @cell-click="clickSoftCell" :header-cell-style="{'font-weight':'bold', color:'#2A2A2A'}">
                        <el-table-column prop="productName" label="产品"></el-table-column>
                        <el-table-column prop="qrCode" label="条码"></el-table-column>
                        <el-table-column v-for="item in softData1_head" :key="item.prop" :prop="item.prop" :label="item.label" width="66">
                            <template slot-scope="scope">
                                <div style="background:red;color:white" class="spot_result" v-show="scope.row[item.prop]=='未点检'">{{scope.row[item.prop]}}</div>
                                <div style="background:green;color:white" class="spot_result" v-show="scope.row[item.prop]=='已点检'">{{scope.row[item.prop]}}</div>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

            </el-row>
            <el-row style="margin-top:20px">
                <div style="border: 0.5px solid #DCDFE6">

                    <el-table :data="softData2" style="width: 100%" :header-cell-style="{'font-weight':'bold', color:'#2A2A2A'}">
                        <el-table-column prop="productName" label="产品"></el-table-column>
                        <el-table-column prop="dateTime" label="点检时间" width="190"></el-table-column>
                        <el-table-column prop="qrCode" label="条码" ></el-table-column>
                        <el-table-column prop="result" label="结果" width="60">
                            <template slot-scope="scope">
                                <div style="background:red;color:white" class="spot_result" v-show="scope.row.result=='NG'">{{scope.row.result}}</div>
                                <div style="background:green;color:white" class="spot_result" v-show="scope.row.result=='OK'">{{scope.row.result}}</div>
                            </template>

                        </el-table-column>
                        <el-table-column prop="setValue" label="真值" width="80"></el-table-column>
                        <el-table-column prop="realValue" label="实际值" width="180"></el-table-column>
                    </el-table>

                </div>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="硬件点检" name="second">
            <el-row>
                <el-form :inline="true" :model="queryMain" class="demo-form-inline">
                    <el-form-item label="">
                        <el-date-picker   v-selfdbclick  v-model="queryMain.startTime" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="-">
                        <el-date-picker   v-selfdbclick  v-model="queryMain.endTime" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <div style="border: 0.5px solid #DCDFE6">
                    <el-button-group>
                        <el-button size="mini" icon="el-icon-plus" style="border: none;" @click="showAdd"></el-button>
                        <!-- <el-button size="mini" icon="el-icon-edit" style="border: none;"></el-button>
                            <el-button size="mini" icon="el-icon-delete" style="border: none;"></el-button> -->
                    </el-button-group>
                    <el-table :data="inspectionData" style="width: 100%" header-cell-style="font-weight:bold">
                        <el-table-column prop="dateTime" label="日期" width="180"></el-table-column>
                        <el-table-column prop="module" label="模块" ></el-table-column>
                        <el-table-column prop="okDes" label="点检OK项">
                            <template slot-scope="scope">
                                <div v-for="item in scope.row.okDes.split('$')">
                                    {{ item}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ngDes" label="点检NG项">
                            <template slot-scope="scope">
                                <div v-for="item in scope.row.ngDes.split('$')">
                                    {{ item}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="点检结果" width="100"></el-table-column>
                        <el-table-column prop="user" label="点检人" width="100"></el-table-column>
<!--                        <el-table-column prop="des" label="备注"></el-table-column>-->
                    </el-table>
                </div>
            </el-row>
        </el-tab-pane>

    </el-tabs>
    <el-dialog title="增加点检信息" :visible.sync="is_addShow" width="500">
        <div style="overflow-y: auto;height: 560px;">

            <el-form :model="addForm" class="demo-form-inline" label-width="80px" label-position="left" :inline="true">
                <el-form-item label="日期">
                    <el-date-picker   v-selfdbclick  v-model="addForm.dateTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="点检状态">
                    <el-input v-model="addForm.status" placeholder="" disabled="true" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="点检人">
                    <el-input v-model="addForm.user" placeholder="" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="模块">
                    <el-select style="width: 220px" v-model="addForm.module" @change="changeModule">
                        <el-option v-for="item in modules" :label="item.module" :value="item.module" :key="item.module"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <el-row>
                <!-- <el-col :span="12">
                        <el-table :data="okData" ref="oktable" style="width: 100%" header-cell-style="font-weight:bold" @selection-change="selectOK">
                            <el-table-column
      type="selection"
      width="55">
    </el-table-column>
                            <el-table-column  prop="ok" label="OK" width="180"></el-table-column>

                        </el-table>
                    </el-col>
                    <el-col :span="12">
                        <el-table :data="ngData" ref="ngtable" style="width: 100%" header-cell-style="font-weight:bold" @selection-change="selectNG">
                            <el-table-column
      type="selection"
      width="55">
    </el-table-column>
                            <el-table-column  prop="ng" label="NG" width="180"></el-table-column>

                        </el-table>
                    </el-col> -->
                <span> 选择部件列表(勾选)</span>
                <el-table :data="okNgData" ref="addTable"     @selection-change="selectOkNg"><!-- @selection-change="selectOkNg" -->

                    <el-table-column prop="parts" label="部件"></el-table-column>
                    <el-table-column prop="info" label="点检信息"></el-table-column>
                    <el-table-column prop="way" label="点检方法" width="180"></el-table-column>
                    <el-table-column prop="standard" label="点检标准" width="180"></el-table-column>
                    <el-table-column prop="opt" label="点检结果" width="180">
                        <template slot-scope="scope">
                            <div>
                                <!-- <span>{{ scope.row.parts }}</span> -->
                                <!-- <el-radio-group v-model="scope.row.opt" @change="selectOkNg(scope.row)"> -->
                                    <el-checkbox label="OK" v-model="scope.row.checkedOK" @change="(v)=>changeCheckOK(v,scope.row)">OK</el-checkbox>
                                    <el-checkbox label="NG" v-model="scope.row.checkedNG" @change="(v)=>changeCheckNG(v,scope.row)">NG</el-checkbox>
                                <!-- </el-radio-group> -->

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="is_addShow = false">取 消</el-button> -->
            <el-button type="primary" @click="addSave">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import { formatCurrentTime } from '../../utils/tools.js';
export default {
    data() {
        return {

            selectedModule: '',
            modules: [{

                    module: "模块1",
                    children: [{
                        parts: "部件",
                        info: "测试信息1",
                        way: "保养方法",
                        standard: "保养标准",

                    }]
                }, {

                    module: "模块2",
                    children: [{
                        parts: "部件2",
                        info: "测试信息2",
                        way: "保养方法22",
                        standard: "保养标准2",

                    }]
                }

            ],


            okNgData: [{ parts: 'bujian', info: 'xinxi', way: 'fangfa', standard: 'biaozhun', opt: "OK" ,checkedOK:false,checkedNG:false},
             { parts: 'bujian11', info: 'xinxi', way: 'fangfa11', standard: 'biaozhun11', opt: "NG" ,checkedOK:false,checkedNG:false}],
            selectedOK: [],
            selectedNG: [],
            okData: [{ ok: 1 }, { ok: 2 }],
            ngData: [{ ng: 1 }, { ng: 2 }],
            nextSpotSoftTime: '2011-11-11 11:32:22',
            activeName: 'first',
            addForm: {
                dateTime: formatCurrentTime(),
                okDes: '',
                ngDes: '',
                status: 'OK',
                user: '',
                des: '',
                module:''

            },
            is_addShow: false,
            qtCall: null,
            queryMain: {
                startTime: '',
                endTime: ''
            },
            queryMainSoft: {
                startTime: '',
                endTime: '',
                productName: '全部',
                // recipe:'全部'
            },
            softData1_head: [{ label: 'item2', prop: 'item2' }, { label: 'item1', prop: 'item1' }],
            softData1: [{
                productName: '华为',
                item1: '已点检',
                item2: '未点检',
                qrCode: 'NG'
            }, {
                productName: 'p40',
                item1: '未点检',
                item2: '未点检',
                qrCode: 'NG1111111'
            }],
            softData2: [{
                productName: "华为",
                qrCode: "ss123456ff", //条码
                dateTime: "2011-11-11 11:22:33", //点检时间
                result: "OK",
                setValue: "50", //真值
                realValue: "60", //实际值
            }, {
                productName: "华为1",
                qrCode: "ss123456ff1", //条码
                dateTime: "2011-11-11 11:22:31", //点检时间
                result: "NG",
                setValue: "51", //真值
                realValue: "61", //实际值
            }],
            inspectionData: [
                // {
                //     date: '2024-04-26 10:39:23',
                //     okDes: '上下料XYZ轴系是否运行平顺，无卡顿，无异响$上下料XYZ轴系是否运行平$',
                //     ngDes: 'Tray升降丝杆是否运行平顺，无卡顿，无异响$',
                //     status: 'NG',
                //     operator: '操作员B',
                //     remarks: 'sss'
                // },
                // {
                //     date: '2024-04-26 10:39:23',
                //     okDes: '上下料XYZ轴系是否运行平顺，无卡顿，无异响$上下料XYZ轴系是否运行平$',
                //     ngDes: 'Tray升降丝杆是否运行平顺，无卡顿，无异响$rffffff',
                //     status: 'OK',
                //     operator: '操作员A',
                //     remarks: '无'
                // }
            ]
            ,
            addSelections:[]
        }
    },
    methods: {
        changeStatus(){
            this.addForm.status='OK'
            this.okNgData.forEach(item=>{
                if(item.checkedNG==true){
                    this.addForm.status='NG'
                }
            })
        },
        changeCheckOK(val,row){
            if(val==true){
                // this.check
                row.checkedNG=false

                this.changeStatus()
            }
        },
        changeCheckNG(val,row){
            if(val==true){
                // this.check
                row.checkedOK=false
                this.changeStatus()
            }
        },
        changeModule(val){
            console.log('change-module',val)
            this.modules.forEach(item=>{
                var children = item['children']
                if(item['module']==val){
                    console.log('module-children', children)
                    this.okNgData = []
                    children.forEach(child=>{
                        this.okNgData.push({ ...child,opt: 'OK',checkedNG:false,checkedOK:false })
                    })
                    console.log('联动部件列表', this.okNgData)
                }

        })
        this.$refs.addTable.setCurrentRow(this.okNgData[0])
        },
        showAdd() {
            this.is_addShow = true
            this.qtCall.JsToQt("AddHardSpotDetectLogLinkageList", {});
        },
        clickSoftCell(row, column, cell, event) {
            console.log(row.qrCode)
            console.log(column.property)
            if (column.property == column.label) {
                var param = { dateTime: column.property, qrCode: row.qrCode }
                console.log('查询单个软件点检参数', param)
                this.searchSoftOne(param)
            }

        },
        searchSoft() {
            console.log('查询软件点检传参', this.queryMainSoft)
            if (process.env.NODE_ENV === 'production') {
                this.qtCall.JsToQt("NeedQuerySoftSpotDetectLogs", this.queryMainSoft);
            }
        },
        searchSoftOne(queryParam) {
            console.log('查询软件点检传参单个', queryParam)
            if (process.env.NODE_ENV === 'production') {
                this.qtCall.JsToQt("NeedQuerySoftSpotDetectLog", this.queryMainSoft);
            }
        },
        search() {
            console.log('查询硬件点检传参', this.queryMain)
            if (process.env.NODE_ENV === 'production') {
                this.qtCall.JsToQt("NeedQueryHardSpotDetectLogs", this.queryMain);
            }
        },
        addSave() {
            // this.addForm.okDes = ''
            // this.addForm.ngDes = ''
            // for (let index = 0; index < this.selectedOK.length; index++) {
            //     const element = this.selectedOK[index];
            //     this.addForm.okDes+=element['ok']+'  '//双空
            // }
            // for (let index = 0; index < this.selectedNG.length; index++) {
            //     const element = this.selectedNG[index];
            //     this.addForm.ngDes+=element['ng']+'  '
            // }
            var selections = []
            for (let index = 0; index < this.okNgData.length; index++) {
                const element = this.okNgData[index];
                if(element.checkedNG==true||element.checkedOK==true){
                    selections.push(element)
                }
            }
            this.selectOkNg(selections)
            console.log('添加硬件点检参数', this.addForm)
            if (process.env.NODE_ENV === 'production') {
                this.qtCall.JsToQt("NeedAddHardSpotDetectLog", this.addForm);
            }
            this.is_addShow = false;
        },
        selectOK(selection) {
            console.log('selectOK', selection)
            this.selectedOK = selection
            this.addForm.status = 'OK'
            setTimeout(function () { this.$refs.ngtable.toggleRowSelection(0, false); }, 1000)

            if (selection.length > 0)
                this.$refs.ngtable.toggleRowSelection(selection[selection.length - 1], false);
        },
        selectNG(selection) {
            console.log('selectNG', selection)
            this.selectedNG = selection
            if (this.selectedNG.length > 0) {
                this.addForm.status = 'NG'
            } else {
                this.addForm.status = 'OK'
            }
            if (selection.length > 0)
                this.$refs.oktable.toggleRowSelection(selection[selection.length - 1], false);
        },
        selectOkNg(selection) {
            console.log('selectokng', selection)
            /* var currentRow = selection
            var way = currentRow.way
            var standard = currentRow.standard
            var parts = currentRow.parts
            var info = currentRow.info
            //    this.addForm.
            if (currentRow.opt == 'OK') {
                this.addForm.okDes = '模块:' + this.selectedModule + '  部件:' + parts + "  标准:" + standard + "  方法:" + way + "  信息:" + info
                this.addForm.ngDes = ''
                this.addForm.status = 'OK'
            } else {
                this.addForm.ngDes = '模块:' + this.selectedModule + '  部件:' + parts + "  标准:" + standard + "  方法:" + way + "  信息:" + info
                this.addForm.okDes = ''
                this.addForm.status = 'NG'
            } */
           this.addForm.ngDes = ''
           this.addForm.okDes = ''
           this.addForm.status = 'OK'
            for (let index = 0; index < selection.length; index++) {
                const element = selection[index];
                var currentRow = element
                var way = currentRow.way
                var standard = currentRow.standard
                var parts = currentRow.parts
                var info = currentRow.info
                //    this.addForm.
                if (currentRow.checkedOK == true) {//currentRow.opt == 'OK'
                    this.addForm.okDes += '模块:' + this.addForm.module + '  部件:' + parts + "  标准:" + standard + "  方法:" + way + "  信息:" + info+ '$'
                } else {
                    this.addForm.ngDes += '模块:' + this.addForm.module + '  部件:' + parts + "  标准:" + standard + "  方法:" + way + "  信息:" + info+ '$'
                }
            }
            if(this.addForm.ngDes!=''){
                this.addForm.status = 'NG'
            }
        }
    },
    mounted() {
        if(process.env.NODE_ENV != 'production'){
            for (let index = 0; index < 8; index++) {
                this.okNgData.push(
                { parts: 'bujian', info: 'xinxi', way: 'fangfa', standard: 'biaozhun', opt: "OK" ,checkedOK:false,checkedNG:false})

            }

        }
        if (process.env.NODE_ENV === 'production') {
            new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
                this.qtCall = channel.objects.webBridge;
                this.qtCall.JsToQt("NeedQuerySoftSpotNextTime", {});

                this.qtCall.QtToJs.connect((func, json) => {
                    if (func == 'NeedAddHardSpotDetectLogList') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取硬件点检添加列表接口数据', datas.data)
                            var okdata = datas.data['OK']
                            var ngdata = datas.data['NG']
                            this.okData = [];
                            this.ngData = []
                            okdata.forEach(element => {
                                this.okData.push({ ok: element })
                            });
                            ngdata.forEach(element => {
                                this.ngData.push({ ng: element })
                            });
                            console.log('硬件点检ok/ng-list', this.okData, this.ngData)
                        }
                    }
                    if (func == 'RefreshHardSpotDetectLogs') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取硬件点检接口数据', datas.data)
                            this.inspectionData = datas.data['HardSpotDetectLogs']
                            console.log('获取硬件点检接口数据table', this.inspectionData)
                        }
                    }
                    if (func == 'NeedQuerySoftSpotDetectLogs') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('获取软件点检数据-多个', datas.data)
                            var tabledata = datas.data['SoftSpotDetectLogs']
                            if (tabledata.length > 0) {
                                this.softData1_head = []
                                var headerdata = tabledata[0]
                                for (var key in headerdata) {
                                    this.softData1_head.push({ prop: key, label: key })
                                }
                            }
                            console.log('表格head', this.softData1_head)
                            this.softData1 = tabledata

                        }
                    }
                    if (func == 'NeedQuerySoftSpotDetectLog') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('刷新软件点检单个数据', datas.data)
                            this.softData2 = datas.data['SoftSpotDetectLog']
                        }
                    }
                    if (func == 'NeedQuerySoftSpotNextTime') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('刷新下次点检时间', datas.data)
                            this.nextSpotSoftTime = datas.data['NextTime']
                        }
                    }
                    if (func == 'AddHardSpotDetectLogLinkageList') {
                        var datas = JSON.parse(json)
                        if (datas.code === 200) {
                            console.log('点检记录-刷新模块-部件联动', datas.data)
                            this.modules = []
                            datas.data['AddData'].forEach(item => {
                                this.modules.push({ ...item, opt: 'OK' })
                            })
                            console.log('this.modules', this.modules)
                        }
                    }
                })
                this.qtCall.JsToQt("NeedAddHardSpotDetectLogList", {});
            });
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-button-group i {
    font-weight: 600;
    font-size: large;
}

.spot_result {
    padding-right: 5px;
    top: 1px;
    position: absolute;
    background: red;
    color: white;

    line-height: 32px;
    padding-left: 5px;
    margin-top: 6px;
}

/deep/ .el-table th .el-checkbox {
    display: none;
}

</style>
